<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
    <title>B站个人主页菜单鼠标悬停特效</title>
    <!-- 按钮样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --hue: 40;
            --step: 40;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #454647;
        }

        ul {
            display: flex;
            /* 如果要水平排列,屏蔽掉下边这行 */
            /* flex-direction: column; */
            align-items: start;
            list-style-type: none;
        }

        ul li {
            padding: 6px 0;
            margin: 0 16px;
        }

        ul li a {
            position: relative;
            display: block;
            padding: 4px 0;
            font-size: 24px;
            color: #eeeeee;
            text-decoration: none;
            text-transform: uppercase;
            transition: 0.5s;
        }

        ul li a::after {
            position: absolute;
            content: '';
            top: 100%;
            left: 0;
            width: 100%;
            height: 3px;
            background: oklch(80% 80% calc(var(--hue) + var(--step) * var(--i)));
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.5s;
        }

        ul li a:hover {
            color: #aaaaaa;
        }

        ul li a:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }

        ul li a i {
            font-size: 18px;
            margin-right: 12px;
            color: oklch(80% 80% calc(var(--hue) + var(--step) * var(--i)));
        }
    </style>
</head>

<body>
    <ul>
        <li style="--i: 0">
            <a href="#">
                <i class="fa-solid fa-house"></i>主页
            </a>
        </li>
        <li style="--i: 1">
            <a href="#">
                <i class="fa-solid fa-camera-retro"></i>动态
            </a>
        </li>
        <li style="--i: 2">
            <a href="#">
                <i class="fa-solid fa-pen-nib"></i>投稿
            </a>
        </li>
        <li style="--i: 3">
            <a href="#">
                <i class="fa-solid fa-youtube"></i>合集和列表
            </a>
        </li>
        <li style="--i: 4">
            <a href="#">
                <i class="fa-solid fa-star"></i>收藏
            </a>
        </li>
        <li style="--i: 5">
            <a href="#">
                <i class="fa-solid fa-heart"></i>追番追剧
            </a>
        </li>
        <li style="--i: 6">
            <a href="#">
                <i class="fa-solid fa-gear"></i>设置
            </a>
        </li>
    </ul>
</body>

</html>